<script setup lang="ts">
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
import { useAuthStore } from '@/store/modules/auth';

defineOptions({
  name: 'GlobalContent'
});

interface Props {
  /** Show padding for content */
  showPadding?: boolean;
}


withDefaults(defineProps<Props>(), {
  showPadding: true
});

const appStore = useAppStore();
const themeStore = useThemeStore();
const routeStore = useRouteStore();
const authStore = useAuthStore();

const watermarkRoutes = routeStore.watermarkRoutes

function isShowWaterMark(path:string):boolean{
	return watermarkRoutes.findIndex(it=>path===it) > -1
}

</script>

<template>
  <RouterView v-slot="{ Component, route }">
    <n-watermark v-if="isShowWaterMark(route.path)" :content="authStore.userInfo.userName" cross fullscreen :font-size="16"
      :line-height="16" :width="384" :height="154" :x-offset="12" :y-offset="60" :rotate="-15" />
    <!-- <Transition
      :name="themeStore.page.animateMode"
      mode="out-in"
      @before-leave="appStore.setContentXScrollable(true)"
      @after-enter="appStore.setContentXScrollable(false)"
    > -->
    <KeepAlive :include="routeStore.cacheRoutes">
      <component :is="Component" v-if="appStore.reloadFlag" :key="route.path" :class="{ 'p-16px': showPadding }"
        class="flex-grow bg-layout transition-300" />
    </KeepAlive>
    <!-- </Transition> -->
  </RouterView>
</template>

<style></style>
